<template>
  <div id="assetAnalysis">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <a-spin :spinning="spinning">
    <div class="container">
      <!-- <div class="total">
        <div class="text">
          <span>合计:</span>
          <span>上架数量: 1000</span>
          <span>可周转数量:4000</span>
          <span>成交额:10000</span>
        </div>
      </div> -->
      <DataTable
        rowKey="adminId"
        :btns="btns"
        :tableData="Data"
        :showConfig = false
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        @refresh="getList"
        @handleEvent="handleJump"
      />
    </div>
    </a-spin>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator';
import { BILLRECORD_BILLRECORDEXPORT } from '@/api/global'
@Component
export default class assetAnalysis extends Vue {
  spinning:boolean= false
  projectList:any[] = []
  taskDetailList:any[] = []
  projectId:any = ''
  taskDetailId:any = ''
  typeList:any=[{
    label: '购入',
    value: 'GR'
  }, {
    label: '调出',
    value: 'DC'
  }, {
    label: '调入',
    value: 'DR'
  }]
  searchForm: any = {
    projectId: undefined,
    yearMonth: '',
    type: undefined,
    status: undefined
  };
  btns: any[] = [
    {
      label: '导出',
      icon: 'export',
      callback: () => this.$util.exportExcelFun(this.idObj, BILLRECORD_BILLRECORDEXPORT)
    }
  ];
  get filterData () {
    return {
      projectId: {
          label: '项目',
          type: 'select',
          width: 200,
          template: {
            placeholder: '请选择项目',
            clearable: true,
            filterable: true,
            options: this.projectList,
            callback: this.callbackProject,
            search: this.searchProject
          }
        },
        yearMonth: {
          label: '选择时间',
          type: 'daterange2',
          width: 200,
          template: {
            placeholder: '请选择时间'
          }
        },
        status: {
          label: '类型筛选',
          type: 'select',
          width: 200,
          template: {
            placeholder: '请选择类型',
            clearable: false,
            options: this.typeList
          }
        }

    };
  }
  Data: any[] = [];
  tableColumn: any = {
    ind: {
      label: '序号',
      width: 120
    },
    vbillcode: {
      label: '单据编号',
      width: 120
    },
    materialCode: {
      label: '物料编码',
      width: 120
    },
    materialName: {
      label: '物料名称',
      width: 120
    },
    unit: {
      label: '单位',
      width: 100
    },
    vbdef1: {
      label: '存货备注',
      width: 100
    },
    vbatchcode: {
      label: '批次号',
      width: 100
    },
    buyNum: {
      label: '购入量',
      width: 100
    },
    buyUnitPrice: {
      label: '购入单价',
      width: 100
    },
    incomeNum: {
      label: '调入量',
      width: 100
    },
    incomeUnitPrice: {
      label: '调入单价',
      // type: 'event',
      width: 100
    },
    outcomeNum: {
      label: '调出量',
      width: 100
    },
    outcomeUnitPrice: {
      label: '调出单价',
      width: 100
    }
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  idObj:any = {
    projectId: this.searchForm.projectId,
    status: this.searchForm.status,
    yearMonth: this.searchForm.yearMonth.substring(0, 7)
  }
  searchValue:any = ''
// get getSearchForm () {
//     return {
//       word: this.searchForm.word
//     }
//   }
  get getSearchForm () {
    return {
      taskDetailId: 'ID844226444786663424'
    };
  }

  init () {
    this.getProjectList()
    this.getList()
  }
  getyearMonth (val:any) {
      console.log(val, '---')
  }
  // 选择周期
  handleSelectTaskDetail (val:any) {
    this.idObj.taskDetailId = val
    // this.getList(val)
  }
  // 获取项目列表
  getProjectList () {
    let data = {
      page: 1,
      size: 100,
      searchValue: this.searchValue
    }
    this.$api.projectRoleProjectListFetch(data).then((res:any) => {
      let projectList = res.data.records.map((item:any) => { item.label = item.ncProjectName; item.value = item.ncProjectId + '-' + item.ncProjectName })
      this.projectList = res.data.records
    }).catch()
  }
  // 选择项目
  handleSelectProject (val:any) {
    this.$api.billRecordTaskListFetch({projectId: val}).then(res => {
      console.log(res.data, '====res.data')
      if (res.data.length == 0) {
        this.taskDetailList = []
        this.searchForm.taskDetailId = ''
      } else {
        res.data.map((item:any) => {
          item.label = item.taskName
          item.value = item.taskDetailId
        })
        this.taskDetailList = res.data
      }
    }).catch()
  }
  callbackProject (val:any) {
    this.searchValue = val
    this.currentPage = 1
    this.getProjectList()
  }
  searchProject (val:any) {
    this.searchValue = val
    this.currentPage = 1

    this.getProjectList()
  }
  getList () {
    this.spinning = true
    let data = {
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize,
      projectId: this.searchForm.projectId ? this.searchForm.projectId.split('-')[0] : '',
      yearMonth: this.searchForm.yearMonth.substring(0, 7),
      status: this.searchForm.status

    };
    this.$api.billRecordBillRecordListFetch(data).then((res: any) => {
      this.spinning = false
      res.data.records.map((item:any, index:any) => {
        item.ind = this.pageConfig.pageSize * (this.pageConfig.current - 1) + 1 + index
      })
      this.Data = res.data.records;
      this.pageConfig.total = res.data.total;
      // if (!this.Data.length && this.pageConfig.current > 1) {
      //   --this.pageConfig.current;
      //   this.getList();
      // }
    });
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  handleJump (row: any) {
    this.$router.push({
      path: '/allot/assetAnalysis/operate',
      query: { _alias: 'detail' }
    });
  }
}
</script>
<style lang='scss' scoped>
.total {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  .text {
    margin-right: 10px;
    font-weight: bold;
    flex: 1;
    display: flex;
    span {
      margin-right: 30px;
    }
  }
}
</style>
